<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid black;
        }
        .but{
            display: flex;
            justify-content: space-between;
            text-align: center;
            background-color: #eaeaea;
        }
        
        .buts{
            width: 100%;
            height: 100px;
            line-height: 100px;
            border: 1px solid #000;
        }
        .content{
            display: flex;
        }
        .content .item{
            height: 399px;
            line-height: 399px;
            width: calc(100% / 3);
            text-align: center;
            font-size: 50px;
        }
        .but .active{
            background-color: red;
            color: #fff;
            font-weight: bold;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="but">
            <!-- <div class="buts">手机</div>
            <div class="buts">电脑</div>
            <div class="buts">空调</div> -->
        </div>
        <div class="content">
            <!-- <div class="item">手机</div>
            <div class="item">手机</div>
            <div class="item">手机</div> -->
        </div>
    </div>
</body>
</html>
<script>
    function $(a){return document.querySelector(a)}
    function gets(a){return [...document.querySelectorAll(a)]}
    let data = [
        {
            name:'手机',
            list:[
                '苹果',
                '华为',
                'oppo'
            ]
        },
        {
            name:'电脑',
            list:[
                '苹果',
                '联想',
                '外星人'
            ]
        },
        {
            name:'空调',
            list:[
                '格力',
                '美的',
                '长虹'
            ]
        },
    ]

    function Yay(el,data){
        this.el = el;
        this.data = data
        this.rander(0)
        this.click()
        
    }
    Yay.prototype = {
       
        rander(i){
            console.log(this.el);
            var thas = this
            let title = this.data.map((item,index,data) =>{
                return `<div class="buts" index="${index}">${thas.data[index].name}</div>`
            }).join('')

            $('.but').innerHTML = title ;
            
            
            let context = this.data[i].list.map(item =>{
                return `<div class="item">${item}</div><img src="">`
            }).join('')

            $('.content').innerHTML = context;
            gets('.but .buts')[i].classList.add('active')
        },
        click(){
            var thas = this;
            $('.but').onclick=function(e){
                if(e.target.className === 'buts'){
                    thas.rander(e.target.getAttribute('index'))
                }   
            }   
        }
    }
    new Yay(document.querySelector('.box'),data)
</script>